<script setup>
  // const arr = [1, 2, 3, [4, 5, 6]]
  // 1.数组解构赋值
  // const [a, b, c] = arr
  // console.log(a, b, c)

  // 跳过赋值
  // const [, a, b] = arr
  // console.log(a, b)

  // 拓展结构
  // const [a, ...b] = arr
  // [2, 3, [4, 5, 6]]
  // console.log(b)

  // 嵌套结构
  // 只要保证结构一致即可
  // const [, , , [, a, b]] = arr
  // console.log(a, b)

  // 2.对象解构赋值
  // const obj = {
  //   name: "careathers",
  //   age: 18,
  //   sex: "male",
  //   info: {
  //     studentId: 232525,
  //     school: "ChangSha Social Work College"
  //   },
  //   study: () => {
  //     console.log("好好学习，天天向上")
  //   }
  // }

  // 接收全部属性
  //  -- 按照属性名进行赋值
  //  -- 数组是按照顺序进行赋值的，而对象是按照属性名进行索引赋值
  // const {name, age, study} = obj
  // console.log(name)
  // console.log(age)
  // study()

  // 使用对象进行接收
  // const {info, study, ...childObj} = obj
  // console.log(childObj)

  // 属性重命名接收
  // 原始结构赋值的写法为 const {目标属性值： 接收的变量} = obj
  // 前面我们使用了对象的简写，现在使用原始写法即可重命名，只需修改接收变量名即可
  // const {name: userName} = obj
  // console.log(userName)

  // 嵌套解构
  // 使用嵌套解构 + 重命名
  // const {info: {studentId: id}} = obj
  // console.log(id)

  // 3.箭头函数
  
  // 传统定义函数的方式
  function sayHello() {
    console.log("Hello!")
  }
  // sayHello()

  // 箭头函数
  // 便于书写回调函数
  const sayHi = () => {
    console.log("Hi!")
  } 
  // sayHi()

  // <1> 当函数体仅有一行代码时，可以省略大括号，并且默认返回
  const m1 = () => console.log("m1")
  // m1()

  // <2> 当参数列表仅有一个参数时，可以省略小括号，但是我不建议省略
  // const name = "careathers"
  // const m2 = (name) => console.log(name)
  // m2()
  // const name = "hello world!"
  // const m2 = n => console.log(n +  "place")
  // m2(name)

  // <3> 当直接返回一个对象时，由于省略大括号，而对象又有大括号
  // -- 为了避免歧义，需要使用小括号包裹对象返回
  
  // const m3 = () => ({
  //   name: "careathers",
  //   age: 18
  // }) 
  // console.log(m3())

  // <4> 作为回调函数使用
  // -- 今天不研究异步函数
  // const print = () => {
  //   console.log("函数开始")
  //   setTimeout(async () => {
  //     await console.log("延迟两秒打印")
  //   }, 2000)
  //   console.log("函数结束")
  // }
  // print()
</script>

<template>
  <div>
    <!-- <span v-html="str"></span> -->
  </div>
</template>

<style scoped>

</style>